<%--
  Created by IntelliJ IDEA.
  User: MyDream
  Date: 2020/8/22
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="_linkPages/basePath.jsp"%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册</title>

    <link rel="stylesheet" type="text/css" href="static/css/style.css" />
    <link rel="stylesheet" type="text/css" href="static/css/shopping-mall-index.css" />
    <script type="text/javascript" src="static/js/jquery.js"></script>
    <script type="text/javascript" src="static/js/zhonglin.js"></script>
    <script type="text/javascript" src="static/js/zhongling2.js"></script>
    <script src="static/js/jquery-1.4.2.min.js"></script>
</head>

<body>

<!--内容开始-->
<form action="${basePath}loginDp?method=regUser" class="password-con registered" method="post" onsubmit="return checkLogin(this)">
    <div class="psw">
        <p class="psw-p1">用户名</p>
        <input type="hidden" name="method" value="reg"/>
        <input type="text" name="username" id="username" placeholder="用户名长度为4到15位字符" onblur="checkUsername();"/>
        <span id="dui" style="display:none; color: red;" >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            用户名不符合要求
        </span>
        <span id="dui1" style="display:none; color: red;" >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            用户名已存在
        </span>
    </div>
    <div class="psw">
        <p class="psw-p1">输入密码</p>
        <input type="password" name="password" id="password" placeholder="密码包含字母和数字,且在6-8位" onblur="checkPassword()"/>

        <span id="cuo" style="display:none; color: red">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            密码不符合要求
        </span>
    </div>

    <div class="psw">
        <p class="psw-p1" >确认密码</p>
        <input type="password" name="regPassword" id="regPassword" placeholder="请再次确认密码" onblur="checkPwd()"/>
        <span  id="cuo1" style="display:none; color: red;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            密码不一致，请重新输入
        </span>
    </div>

    <div class="psw psw2">
        <p class="psw-p1">手机号</p>
        <input type="text" name="phone" id="phone" placeholder="请输入手机" onblur="checkPhone()"/>
        <input type="button" onclick="time(this)" value="获取验证码" style="background-color: #1F73C9;" id="sendPhoneCode" />
    </div>
    <div class="psw">
        <span id="errPhone" style="display:none; color: red" >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            手机号码有误，请重填</span>
    </div>
    <div class="psw psw3">
        <p class="psw-p1">验证码</p>
        <input type="text" name="yzm" id="yzm" placeholder="请输入手机验证码" onblur="checkYzm()" />
        <span id="codeMsg" style="color: red; display: none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            验证码有误，请重填
        </span>
    </div>
    <div class="agreement">
        <input type="checkbox" name="hobby" ></input>
        <p>我有阅读并同意<a href="${basePath}loginDp?method=toProtocolPage">《宅客微购网站服务协议》</a></p>
    </div>
    <button type="submit" class="psw-btn">立即注册</button>
    <p class="sign-in">已有账号？请<a href="${basePath}loginDp?method=toLoginPage">登录</a></p>
</form>

</body>
<script type="text/javascript">
    var regUsername = /^\w{5,15}$/;
    var regPhone = /^1[3456789]\d{9}$/;
    var regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
    // 倒计时参数
    var wait=60;
    // 接收验证码
    var sendCode = '';


    function checkLogin(frm) {
        let username = frm.username.value;
        let password = frm.password.value;
        let regPassword = frm.regPassword.value;
        let phone = frm.phone.value;
        let yzm = frm.yzm.value;
        let hobby = frm.hobby;
        if (!regUsername.test(username) || !username) {
            alert("用户名不符合要求");
            return false;
        }
        if (!regPassword.test(password) || !password) {
            alert("密码不符合要求");
            return false;
        }
        if (regPassword != password || !regPassword) {
            alert("两次密码不一致");
            return false;
        }
        if (!regPhone.test(phone) || !phone) {
            alert("手机号不符合要求");
            return false;
        }
        if (!yzm || sendCode != yzm) {
            alert("验证码不符合要求");
            return false;
        }
        if (!hobby.checked) {
            alert("请勾选协议");
            return false;
        }
        return true;
    }
    // 发送验证码
    function time(o) {
        let phoneValue = document.getElementById("phone").value;

        if (!phoneValue) {
            // 电话号码为空，直接跳出
            let errPhone = document.getElementById("errPhone");
            errPhone.style.display = 'block';
            return;
        }
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value="获取验证码";
            wait = 60;
        } else {
            if (wait == 59) {
                // 倒计时到了59，发送验证码
                // 通过ajax发送给验证码
                $.post("${basePath}loginDp?method=sendCode&phone=" + phoneValue, function (data) {
                    // 如果传过来的数据不为空
                    if (data != null) {
                        sendCode = data;
                        console.log(sendCode);
                    } else {
                        sendCode = 0;
                    }
                },'json');
            }

            // 设置按钮是否可点击
            o.setAttribute("disabled", true);
            o.value="重新发送(" + wait + ")";
            wait--;
            setTimeout(function() {
                    time(o)
                },
                1000)
        }
    }

    /**
     * 判断验证码
     */
    function checkYzm() {
        let yzm  = document.getElementById("yzm").value;
        let codeMsg = document.getElementById("codeMsg");
        if (!yzm || yzm != sendCode) {
            console.log(sendCode);
            codeMsg.style.display = "block";
        } else {
            codeMsg.style.display = "none";
        }
    }

    /**
     * 核对密码
     */
    function checkPassword() {
        let password = document.getElementById("password").value;
        let cuo = document.getElementById("cuo");
        if (!regPassword.test(password)) {
            cuo.style.display = "block";
        } else {
            cuo.style.display = "none";
        }
    }

    /**
     * 确定密码
     */
    function checkPwd() {
        let regPassword = document.getElementById("regPassword").value;
        let password = document.getElementById("password").value;
        let cuo1 = document.getElementById("cuo1");
        if (password!=regPassword) {
            cuo1.style.display = "block";
        } else {
            cuo1.style.display = "none";
        }
    }

    /**
     * 核对手机号码是否正确
     */
    function checkPhone(){
        let phone = document.getElementById('phone').value;
        let errPhone = document.getElementById("errPhone");
        if(!regPhone.test(phone)){
            errPhone.style.display = "block";
        } else {
            errPhone.style.display = "none";
        }
    }

    /**
     * 核对用户名是否存在
     */
    function checkUsername() {
        let username = document.getElementById("username").value;
        let dui = document.getElementById("dui");
        let dui1 = document.getElementById("dui1");
        if (!regUsername.test(username)){
            dui.style.display = "block";
        } else {
            dui.style.display = "none";
        }
        //当前用户名符合要求之后，判断用户名是否已注册
        $.get("${basePath}loginDp?method=checkUsername&username="+username, function (data) {
            if (data == -1) {
                dui1.style.display = "block";
            } else {
                dui1.style.display = "none";
            }
        })
    }
</script>
</html>

